<template>
  <div class="bgc-default pad-20">
    <el-row class="hint-area" v-show="hintVisible">
      <el-col :span="18">
        <span
          class="pad-l-20">当前已【{{commanderAutoApprove == 1 ? '开启':'关闭'}}】自动审核团长申请，可前往参数设置{{commanderAutoApprove == 1 ? '关闭':'开启'}}。</span>
        <el-button type="text" @click="linkSetting">立即前往</el-button>
      </el-col>
      <el-col :span="6" align="right">
        <el-button type="info" icon="el-icon-close" class="hint-icon" circle @click="closeHint"></el-button>
      </el-col>
    </el-row>
    <div class="clearfix border-b">
      <div class="pad-t-15 pad-b-20 font-17 fl">
        <el-button @click="codeVisible = true" class="open-btn" type="primary">开通团长码</el-button>
      </div>
    </div>
    <div class="top-operate-default mar-b-20">
      <div class="search-item">
        <label>搜索：</label>
        <el-select v-model="queryParams.keywordType" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="queryParams.keyword" @keyup.enter.native="handleSearch" placeholder="请输入搜索内容"
          style="width: 300px"></el-input>
        <label class="mar-l-20">自提点类型：</label>
        <el-select v-model="queryParams.takeTypeId" placeholder class="pad-l-10 takeSelect" placeholder="请选择自提点类型">
          <el-option v-for="item in takeTypeList" v-if="item.takeTypeCategoryId != 2" :key="item.takeTypeId"
            :label="item.takeTypeName" :value="item.takeTypeId">
          </el-option>
        </el-select>
        <label class="mar-l-20">所属上级：</label>
        <el-select v-model="queryParams.parentType" placeholder class="pad-l-10">
          <el-option v-for="item in partnerTypes" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <label class="mar-l-20">筛选时间：</label>
        <el-date-picker v-model="starEndTime" type="daterange" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button-group>
          <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
          <el-button plain="" @click="resetSearch">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="tabs-box mar-t-15">
      <el-tabs type="card" v-model="queryParams.status" class="member-list-tab" @tab-click="handleClick">
        <el-tab-pane :label="pendingReviewCheckName" name="0"></el-tab-pane>
        <el-tab-pane :label="passedCheckName" name="1"></el-tab-pane>
        <el-tab-pane :label="didNotPassCheckName" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 全选、操作 -->
    <div>
      <div class="pad-t-15 pad-b-15 font-14 v-align-c">
        <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span
            class="mar-l-20">当页全选</span></el-checkbox>
        <span class="pad-l-4 pad-r-4">|</span>
        <div class="width-80">已选{{multipleSelection.length}}项</div>
        <el-button class="batch-btn" @click="batchCheckStatus(undefined,1)">批量通过</el-button>
        <el-button class="batch-btn" @click="batchCheckStatus(undefined,2)">批量拒绝</el-button>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table ref="multipleTable" :data="applyList" @selection-change="handleSelectionChange" v-loading="listLoading"
        element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
        row-class-name="default-row">
        <el-table-column width="55px" type="selection"></el-table-column>
        <el-table-column min-width="240px" label="申请人信息" prop="userInfo">
          <template slot-scope="scope">
            <div class="flex v-align-c cursor-p">
              <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
              <div class="font-14 pad-l-10">
                <div>昵称：{{scope.row.nickname}}</div>
                <div>手机：{{scope.row.phone}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="240px" width="370" label="提货点信息">
          <template slot-scope="scope">
            <div class="flex v-align-c cursor-p">
              <el-image v-if="scope.row.takeAddressPicUrl" style="width: 100px; height: 70px"
                :src="scope.row.takeAddressPicUrl" :preview-src-list="[scope.row.takeAddressPicUrl]">
              </el-image>
              <div class="font-12 pad-l-10">
                <div>{{scope.row.takeName}}</div>
                <div style="color: red;">{{scope.row.takeTypeName}}</div>
                <div>{{scope.row.takeAddress}}{{scope.row.takeAddressDetail}}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column min-width="240px" label="营业执照">
          <template slot-scope="scope">
            <el-image v-if="scope.row.businessLicensePicUrl" style="width: 170px; height:100px"
              :src="scope.row.businessLicensePicUrl" :preview-src-list="[scope.row.businessLicensePicUrl]">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column min-width="240px" width="370" label="身份证信息">
          <template slot-scope="scope">
            <el-image v-if="scope.row.idCardPortraitPhotoUrl" style="width: 170px; height: 100px"
              :src="scope.row.idCardPortraitPhotoUrl" :preview-src-list="[scope.row.idCardPortraitPhotoUrl]">
            </el-image>
            <el-image v-if="scope.row.idCardNationalEmblemPicUrl" style="width: 170px; height: 100px"
              :src="scope.row.idCardNationalEmblemPicUrl" :preview-src-list="[scope.row.idCardNationalEmblemPicUrl]">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column min-width="240px" label="所属招募员111">
          <template slot-scope="scope">
            <div
              v-if="scope.row.recruiterName != null && scope.row.recruiterName != '' || scope.row.recruiterPhone != null && scope.row.recruiterPhone != ''">
              <div v-if="scope.row.recruiterName != null && scope.row.recruiterName != ''">
                姓名：{{scope.row.recruiterName}}</div>
              <div v-if="scope.row.recruiterPhone != null && scope.row.recruiterPhone != ''">
                手机：{{scope.row.recruiterPhone}}</div>
            </div>
            <div v-else>----</div>
          </template>
        </el-table-column>

        <el-table-column min-width="240px" label="所属上级">
          <template slot-scope="scope">
            <div
              v-if="scope.row.recruiterParentName != null && scope.row.recruiterParentName != '' || scope.row.recruiterParentPhone != null && scope.row.recruiterParentPhone != ''">
              <div v-if="scope.row.recruiterParentName != null && scope.row.recruiterParentName != ''">
                姓名：{{scope.row.recruiterParentName}}</div>
              <div v-if="scope.row.recruiterParentPhone != null && scope.row.recruiterParentPhone != ''">
                手机：{{scope.row.recruiterParentPhone}}</div>
            </div>
            <div v-else>----</div>
          </template>
        </el-table-column>
        <el-table-column width="240px" label="申请时间" v-if="queryParams.status == 0" prop="createTime">
        </el-table-column>
        <el-table-column width="240px" label="通过时间" v-if="queryParams.status == 1" prop="updateTime">
        </el-table-column>
        <el-table-column width="240px" label="拒绝时间" v-if="queryParams.status == 2" prop="updateTime">
        </el-table-column>
        <el-table-column width="140px" label="操作" align="right" fixed="right" v-if="queryParams.status == 0">
          <template slot-scope="scope" v-if="queryParams.status == 0">
            <el-button type="text" size="medium" @click="batchCheckStatus(scope.row, 1)">通过</el-button>
            <el-button type="text" size="medium" @click="batchCheckStatus(scope.row, 2)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.currentPage" :limit.sync="queryParams.size"
      @pagination="getList" />
    <!-- 添加内部微客弹窗 -->
    <el-dialog title="" :visible.sync="financeVisible" :close-on-press-escape="true" width="400px">
      <div>
        <img :src="enterpriseWxaCode" style="width: 400px">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="financeVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 团长申请码弹窗 -->
    <el-dialog title="总部团长申请码" class="code-area-box" :visible.sync="codeVisible" width="340px" :show-close="false"
      :close-on-click-modal="true">
      <div class="code-box">
        <img :src="commanderWxaCode" v-if="commanderWxaCode" />
      </div>
      <div slot="footer" class="dialog-footer">
        <p>用微信"扫一扫" 扫描上方二维码</p>
        <p>申请团长权限</p>
      </div>
    </el-dialog>
    <!-- 提示关闭弹窗 -->
    <el-dialog title="确认操作" width="500px" v-el-drag-dialog :visible.sync="hintOperateVisible">
      <el-radio-group v-model="hintRadio">
        <el-radio label="0">今天不再显示</el-radio>
        <el-radio label="1">我已深知该业务功能配置，不再显示</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hintOperateVisible = false">取消</el-button>
        <el-button type="primary" @click="saveHint">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    pagingApply,
    updateBatchByStatus,
    updateAutoApproveHint,
    countApply,
    getEnterpriseCommanderApplyCode
  } from '@/api/user/villageCommanderApply'
  import {
    getTakeLocationTypeList
  } from '@/api/system/takeLocationType'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import vipIcon from '@/assets/images/vip-icon.png'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        options: [{
          value: 'nickname',
          label: '微客昵称'
        }, {
          value: 'nickphone',
          label: '微客手机号'
        }, {
          value: 'takename',
          label: '提货点名称'
        }, {
          value: 'takeaddress',
          label: '提货点地址'
        }],
        partnerTypes: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '一级合伙人'
        }, {
          value: '2',
          label: '二级合伙人'
        }, {
          value: '3',
          label: '总部'
        }],
        applyList: [],
        total: 0,
        queryParams: {
          currentPage: 1,
          size: 10,
          status: 0,
          keywordType: 'nickname',
          keyword: '',
          takeTypeId: '',
          parentType: ''
        },
        listLoading: true,
        multipleSelection: [],
        starEndTime: [],
        enterpriseWxaCode: '',
        financeVisible: false,
        pendingReviewCheckName: '待审核（0）',
        passedCheckName: '已通过（0）',
        didNotPassCheckName: '未通过（0）',
        allChecked: false,
        vipIcon,
        opeartApplyIds: '',
        opeartStatus: '',
        hintVisible: false,
        codeVisible: false,
        commanderAutoApprove: '',
        // 自动审核操作Visible
        hintOperateVisible: false,
        hintRadio: '0',
        commanderWxaCode: '',
        takeTypeList: []
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.queryParams.enterpriseId = this.getEnterpriseId()
      this.getList()
      getByEnterpriseId(this.getEnterpriseId()).then((response) => {
        if (response.isError) return
        this.hintVisible = response.data.commanderAutoApproveHint === 1
        this.commanderAutoApprove = response.data.commanderAutoApprove
      })

      this.getEnterpriseCommanderApplyCode()
      // 自提点类型列表
      this.getTakeTypeList()
    },
    methods: {
      getTakeTypeList() {
        getTakeLocationTypeList().then(response => {
          this.takeTypeList = response
          this.takeTypeList.unshift({
            'takeTypeId': '',
            'takeTypeName': '全部'
          })
        })
      },
      getCountApply() {
        countApply(this.getEnterpriseId(), 1).then(response => {
          if (response.isError) return
          this.pendingReviewCheckName = '待审核（' + Math.floor(response.data.applyNum) + '）'
          this.passedCheckName = '已通过（' + Math.floor(response.data.adoptNum) + '）'
          this.didNotPassCheckName = '未通过（' + Math.floor(response.data.refuseNum) + '）'
        })
      },
      getList() {
        this.listLoading = true
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.queryParams.startDate = this.starEndTime[0]
            this.queryParams.endDate = this.starEndTime[1]
          }
        } else {
          this.queryParams.startDate = ''
          this.queryParams.endDate = ''
        }
        this.queryParams.applySource = 1
        this.getCountApply()
        pagingApply(this.queryParams).then(response => {
          if (response.isError) return
          this.applyList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      handleClick() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      handleClickBasic() {},
      handleSearch() {
        this.queryParams.currentPage = 1
        this.getList()
      },
      resetSearch() {
        this.searchReset()
        this.getList()
      },
      searchReset() {
        this.queryParams.currentPage = 1
        this.queryParams.keywordType = 'nickname'
        this.queryParams.keyword = ''
        this.queryParams.takeTypeId = ''
        this.queryParams.parentType = ''
        this.starEndTime = []
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.applyList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      batchCheckStatus(row, status) {
        let applyIds = ''
        if (row !== undefined) {
          applyIds = row.applyId + ''
        } else {
          const selections = this.multipleSelection
          selections.forEach(e => {
            applyIds += e.applyId + ','
          })
        }
        if (applyIds) {
          this.opeartApplyIds = applyIds
          this.opeartStatus = status
          this.$confirm('是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            updateBatchByStatus(this.opeartApplyIds, this.opeartStatus).then(
              response => {
                if (response.isError) return
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.getList()
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        } else {
          this.msgError('请选择要操作的数据!')
        }
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.applyList.length) {
          this.applyList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      // 跳转系统参数事件
      linkSetting() {
        this.$router.push({
          path: '/system/system-config/index',
          query: {
            active: 'cloudshop-set'
          }
        })
      },
      // 自动审核提示框关闭事件
      closeHint() {
        this.hintRadio = '0'
        this.hintOperateVisible = true
      },
      // 自动审核提示框保存事件
      saveHint() {
        const form = {
          enterpriseId: this.getEnterpriseId(),
          hintSelectStatus: this.hintRadio
        }
        updateAutoApproveHint(form).then((response) => {
          if (response.isError) return
          this.hintVisible = false
          this.hintOperateVisible = false
        })
      },
      // 获取团长申请码
      getEnterpriseCommanderApplyCode() {
        getEnterpriseCommanderApplyCode({
          enterpriseId: this.getEnterpriseId()
        }).then((response) => {
          this.commanderWxaCode = response.data
        })
      }
    },
    mounted() {

    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 59px;
    height: 59px;
    display: block;
    border-radius: 50%;
  }

  .line-h-14 {
    line-height: 1.4;
  }

  .cursor-p {
    position: relative;

    .vip-icon-box {
      position: absolute;
      top: -4px;
      left: -7px;
      transform: rotate(308deg);
      z-index: 9;

      img {
        width: 20px;
      }
    }
  }

  .hint-area {
    background-color: #fdf8c8;
    height: 45px;
    line-height: 45px;

    .hint-icon {
      padding: 1px;
      margin: 10px 10px 0 0;
    }
  }

  .el-radio-group {
    padding-left: 5%;

    .el-radio {
      padding-top: 15px;
      display: block;
    }
  }

  .open-btn {
    width: 95px;
    height: 38px;
    line-height: 38px;
    padding: 0;
    text-align: center;
  }

  .code-box {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    background: #ffffff;
    padding: 30px;

    img {
      width: 90%;
    }
  }

  .takeSelect {
    /deep/.el-input {
      width: 220px;
    }
  }
</style>
